/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component,Fragment} from 'react';
import {
  Form, Input, Radio, Select, Icon,
  DatePicker, TreeSelect, Descriptions,
} from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
@connect(({ inner_address_book, loading, global }) => ({
  inner_address_book,
  global,
  loading: loading.models.inner_address_book,
}))
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList:[],
      all_users:[]
    };
  }

  componentDidMount() {
    this.fetAllUser()
  }
  fetAllUser=(value)=>{
    const that=this;
    request(`/search_users`, {
      method: 'GET',
      params:{
        ...value
      }
    }).then((response)=> {
      console.log('all_structures', response)
      if(response.status===200){
        that.setState({
          all_users:response.data.data
        })
      }
    })
  }
  renderTreeNodes = data =>
    data.map((item,index) => {

      if (item.children.length>0) {
        return (
          <TreeNode value={item.id} title={item.name} key={item.id+index} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode  value={item.id}   key={item.id+index}  title={item.name}  />;
    });
  render() {
    const {
      inner_address_book: { organizationData,loading, tableY, meta, searchParams, selectedRowKeys },
    } = this.props;
    console.log('organizationData',organizationData)
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };

    const {getFieldDecorator} = this.props.form;
    const props = {
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({ fileList }) => ({
          fileList: [file],
        }));
        return false;
      },
      fileList: this.state.fileList,
    };
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <Descriptions className={'blue-descriptions'} title={<div style={{textAlign:'center'}}>入职详情</div>} bordered>
            <Descriptions.Item label="真实姓名">
              {getFieldDecorator('name', {
                initialValue: this.props.editRecord?this.props.editRecord.name:'',
                rules: [{ required: true, message: '请输入姓名' }],
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="工号">
              {getFieldDecorator('job_number', {
                initialValue: this.props.editRecord?this.props.editRecord.job_number:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="入职职位">
              {getFieldDecorator('position', {
                initialValue: this.props.editRecord?this.props.editRecord.position:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="入职日期">
              {getFieldDecorator('entry_date', {
                initialValue: this.props.editRecord.entry_date?moment(this.props.editRecord.entry_date):'',
                rules: [{ required: true, message: '请输入入职日期' }],
              })(
                <DatePicker allowClear={false} style={{width:'100%'}}/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="入职部门">
              {getFieldDecorator('department_id', {
                initialValue: this.props.editRecord?this.props.editRecord.department_id:'',
                rules: [{ required: true, message: '请选择部门' }],
              })(
                <TreeSelect
                  treeDefaultExpandAll
                  allowClear
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                >
                  {this.renderTreeNodes(organizationData)}
                </TreeSelect>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="手机号">
              {getFieldDecorator('mobile', {
                initialValue: this.props.editRecord?this.props.editRecord.mobile:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="身份证">
              {getFieldDecorator('identity_number', {
                initialValue: this.props.editRecord?this.props.editRecord.identity_number:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="生日">
              {getFieldDecorator('birthday', {
                initialValue: this.props.editRecord.birthday?moment(this.props.editRecord.birthday):'',
              })(
                <DatePicker allowClear={false} style={{width:'100%'}}/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="邮箱">
              {getFieldDecorator('email', {
                initialValue: this.props.editRecord?this.props.editRecord.email:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
            <Descriptions.Item label="备注">
              {getFieldDecorator('remark', {
                initialValue: this.props.editRecord?this.props.editRecord.remark:'',
              })(
                <Input />
              )}
            </Descriptions.Item>
          </Descriptions>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default AddPoliciesFormWrap;


